<template>
  <el-card>
    <template #header>
      <h3>具有操作行为q的表格</h3>
    </template>

    <base-table
      :data="tableData"
      :columns="columns"
      allow-action
      allow-select
      action-name="更多"
      :actions="actions"
      @selectChange="handleSelectChange"
    >
    </base-table>
  </el-card>
</template>
<script>
import { useConfirm } from '../../../hook/useConfirm'

export default {
  name: 'ActionTable',
  setup() {
    const actions = {
      attrs: {
        label: '操作',
        width: 200
      },
      config: {
        width: 200,
        options: [
          {
            label: '编辑',
            type: 'primary',
            slot: () => <div>编辑123123</div>,
            action: handleEdit
          },
          { label: '删除', type: 'danger', action: handleDelete }
        ]
      }
    }
    const columns = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'email', label: '邮箱' },
      { prop: 'fax', label: '传真' }
    ]
    const tableData = [
      {
        date: '2021-10-10',
        name: '波仔',
        address: '海南省海口市海南大厦',
        email: '864181495@qq.com',
        fax: '2222 2222',
        age: 18
      }
    ]

    // 编辑
    function handleEdit({ $index, row }) {
      console.log('handleEdit $index', $index)
      console.log('handleEdit row', row)
    }

    // 删除
    function handleDelete({ $index, row }) {
      console.log('handleDelete $index', $index)
      console.log('handleDelete row', row)
      useConfirm({
        ok() {
          console.log('ok')
        },
        cancel() {
          console.log('cancel')
        }
      })
    }

    // 多选
    function handleSelectChange(value) {
      console.log('select chang', value)
    }

    return {
      columns,
      tableData,
      actions,
      handleSelectChange
    }
  }
}
</script>
